<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线人数统计</title>
    <script src="js/ajax.js"></script>
    <script>
    var time = 0;
        function getNumber() {
            var num = document.getElementById("number");
            var user = document.getElementById("username");
            var html = "";
            get("OnlineServlet.s", function (res) {
                num.innerText=res.code;
                for (let i =0;i<res.code;i++){
                    var time = (res.data[i].end-res.data[i].start)/1000;
                    html+="<li>"+res.data[i].name+" 在线时间："+time+"秒"+"</li>";
                }
                user.innerHTML=html;
            });
        }
    </script>
</head>
<body onload="getNumber()">
<fieldset>
    <legend>在线人数统计</legend>
    <dl>
        <dt>共有<span id="number"></span>人在线</dt>
        <dd>
            <ol id="username">

            </ol>
        </dd>
    </dl>
</fieldset>

</body>
</html>


<style>
    * {
        vertical-align: middle;
        text-decoration: none;
    }

    fieldset {
        width: 50%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        text-align: center;
        display: inline-block;
        width: 30px;
        line-height: 30px;
        vertical-align: middle;
        color: red

    }


    /*input<small>span<small>select {*/
    /*    min-width: 200px;*/
    /*    height: 30px;*/
    /*    text-align: center;*/
    /*    box-sizing: border-box;*/
    /*}*/

    label {
        min-width: 70px;
        display: inline-block;
        padding: 0px 5px;
        box-sizing: border-box;
    }

    small{
        color: #999999;
        margin-left: 20px;
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>